<template>
  <div>
    <h2>Count 和为{{ sum }}</h2>
    <h1>成员列表</h1>
    <input
      type="text"
      v-model="name"
      placeholder="请输入成员姓名"
      @keyup.enter="handleAddPerson"
    />
    <ul>
      <li v-for="person in persons" :key="person.id">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    ...mapActions(["addPerson"]),
    handleAddPerson() {
      this.addPerson(this.name);
      this.name = "";
    },
  },
  computed: {
    ...mapState(["persons", "sum"]),
  },
};
</script>
